<template>
  <div>
    <GlobalArticle
        v-for="(blogItem, index) of blogList"
        :article-data="blogItem"
        :key="index"
    ></GlobalArticle>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="params.limit"
        :total="totalNum"
        @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
import GlobalArticle from '@/components/Global-Article'
import BlogService from "@/service/BlogService";
// 因为我在第9行给分页加了个背景颜色background，所以比万老的多了一行
export default {
  name: "MyLikeBlog",
  components: {
    GlobalArticle
  },
  data() {
    return {
      blogList: [],
      params: {
        limit: 10, //这个数字是限制分页一次显示多少篇文章，一页10篇文章
        offset: 0
      },
      totalNum: 0
    }
  },
  created() {
    this.getBlogData()
  },
  methods: {
    getBlogData() {
      BlogService.getMyLikeBlog(this.params).then(rs => {
        console.log('博客数据', rs.data.data);
        this.totalNum = rs.data.data.totalNum;
        this.blogList = rs.data.data.blogList;
      })
    },
    changePage(page){
      this.params.offset = (page-1) * this.params.limit;
      this.getBlogData();
    }
  }
}
</script>

<style scoped>

</style>